<style>
    .color-box {
        width: 156px;
        height: 87px;
        float: left;
        padding: 15px;
        margin-right: 20px;
        color: #fff;
    }

    .color-box .title {

        display: block;
        width: 100%;
        font-size: 15px;
    }

    .color-box .color {
        margin-top: 13px;
        display: block;
        font-size: 14px;
    }
    .color-box-m{
        width: 155px;
        height: 50px;
        display: flex;
        align-items: center;
        color: #fff;
        padding: 10px;
    }
    .color-box-m.dark{
        color: #000;
    }
    .color-more-box{
        display: flex;
    }
    .color-more-box>div{
        width: 175px;
    }
</style>
<template>
    <ly-page>
        <ly-navi title="颜色"></ly-navi>
        <ly-page-content>
            <el-divider content-position="left">主题色和倾向性颜色</el-divider>
            <div>
                <div class="color-box" :style="{background:primary_color} ">
                    <span class="title">主题色</span>
                    <span class="color">{{primary_color}}}</span>
                </div>
                <div class="color-box" style="background:#13CE66 ">
                    <span class="title">成功</span>
                    <span class="color">#13CE66</span>
                </div>
                <div class="color-box" style="background:#F7BA2A ">
                    <span class="title">提示/特殊按钮色</span>
                    <span class="color">#F7BA2A</span>
                </div>
                <div class="color-box" style="background:#FE707D ">
                    <span class="title">报错/警示/关闭</span>
                    <span class="color">#FE707D</span>
                </div>
                <div class="color-box" style="background:#F5F7FA ;color: #000">
                    <span class="title">INFO</span>
                    <span class="color">#F5F7FA</span>
                </div>
                <div class="clear"></div>
            </div>
            <el-divider content-position="left">颜色使用</el-divider>
              <div class="color-more-box" style="display: flex">
                  <div>
                      <h4>字体颜色</h4>
                      <div  class="color-box-m" style="background: #1F2D3D">#1F2D3D 表单标题</div>
                      <div  class="color-box-m" style="background: #475669">#475669 表单内容</div>
                      <div  class="color-box-m" style="background: #667586">#667586 表单内容 不可编辑
                      </div>
                      <div  class="color-box-m" style="background: #C0CCDA">#C0CCDA 导航大标题</div>
                      <div  class="color-box-m" style="background: #99A9BF">#99A9BF 备注文字</div>
                      <div  class="color-box-m" style="background: #FFFFFF;color: #000;border:1px solid rgba(211,220,230,1)">#FFFFFF 深色底文字</div>
                  </div>
                  <div >
                      <h4>背景颜色</h4>
                      <div class="color-box-m" style="background: #222931">#222931 深色</div>
                      <div class="color-box-m dark" style="background: #f1f1f1">#f1f1f1 页面底色</div>
                      <div class="color-box-m dark" style="background: #F9FAFC">#F9FAFC 分组底色</div>
                  </div>
                  <div>
                      <h4>边框线颜色</h4>
                      <div class="color-box-m dark" style="background: #C0CCDA">#C0CCDA 表单框色</div>
                      <div class="color-box-m dark" style="background: #E6E6E6">#E6E6E6 页面背景框</div>
                  </div>
                  <div >
                      <h4>辅助线颜色</h4>
                      <div class="color-box-m dark" style="background: #EFF2F6">#EFF2F6  </div>
                  </div>

              </div>

        </ly-page-content>
    </ly-page>
</template>
<script>
    Rap.define("", [], function () {
        return {
            data: function () {
                return {
                    type: 1,
                    primary_color:'#004aff'
                }
            },
            init: function (query) {
                this.type = query.type;
                var color=localStorage.getItem('app_theme_color');
                if(color){
                    this.primary_color=color;
                }
            },
            mounted: function () {

            },
            methods: {}
        }
    })
</script>